<template>
    <div class="tab-select">
        <template v-for="(item, index) in hotFilters" :key="index">
            <van-dropdown-menu v-if="item.subFilterItems && item.subFilterItems.length">
                <van-dropdown-item :title="item.label" :ref="dropdownItemRefs">
                    <div class="drow-content">
                        <tabSelectItem class="d-item" borderColor="#979797" borderActiveColor="#ff9645"
                            v-for="(subItem, indey) in item.subFilterItems" :active="subItem.isSelect"
                            :title="subItem.label" @tag-click="handleSubTagClick(index, indey)" />
                    </div>
                    <viewHouseBtns class="bottom" @clear="handleClearClick(item.label)"
                        @view-click="handleViewClick(item.label)" />
                </van-dropdown-item>
            </van-dropdown-menu>

            <tabSelectItem v-else :title="item.label" :active="item.isSelect" border-width="0px"
                @tag-click="handleTagClick(item, index)" />
        </template>
    </div>
</template>


<script setup>
import { ref, computed } from 'vue';
import tabSelectItem from '@/components/tab-select-item/tab-select-item.vue';
import viewHouseBtns from '../view-house-btns/view-house-btns.vue';

const props = defineProps({
    itemData: {
        type: Array,
        default: () => ([])
    }
})
// 监听数据
const hotFilters = computed(() => {
    return Array.isArray(props.itemData) ? props.itemData : [];
});

const dropdownItemRef = {};
const dropdownItemRefs = (el) => {
    if (el) {
        dropdownItemRef[el.title] = el;
    }
};
// 处理点击事件
const handleSubTagClick = (index, indey) => {
    // 处理点击事件的逻辑
    const item = hotFilters.value[index].subFilterItems[indey];
    item.isSelect = !item.isSelect; // 切换选中状态
};

// 处理清除按钮点击事件
const handleClearClick = (label) => {
    // 清除选中状态的逻辑
    const item = hotFilters.value.find((item) => item.label === label);
    if (item) {
        item.subFilterItems.forEach((subItem) => {
            subItem.isSelect = false; // 清除选中状态
        });
    }
    // 关闭下拉菜单
    dropdownItemRef[label]?.toggle();
};
// 处理查看按钮点击事件
const handleViewClick = (label) => {
    dropdownItemRef[label]?.toggle();
};

// 处理标签点击事件
const handleTagClick = (item, index) => {
    // 处理标签点击事件的逻辑(每次只能选中一个)
    hotFilters.value.forEach((filterItem, filterIndex) => {
        if (filterIndex === index) {
            filterItem.isSelect = !filterItem.isSelect; // 切换选中状态
        } else {
            filterItem.isSelect = false; // 其他标签取消选中状态
        }
    });
};

</script>


<style lang="less" scoped>
.btn-style {
    height: 25px;
    line-height: 25px;
    border-radius: 13px;
    border: 1px solid rgba(0, 0, 0, 0);
    padding: 0 3px;
    background-color: white;
}

:global(.tab-select .van-dropdown-menu) {
    display: inline-block;
}

:global(.tab-select .van-dropdown-menu .van-dropdown-item--down) {
    top: 140px !important;
}

:global(.tab-select .van-dropdown-menu .van-dropdown-item__content) {
    // background-color: #f7f8fb;
    background-color: white;
    padding-top: 0px;
}

:global(.tab-select .van-dropdown-menu .van-dropdown-menu__bar) {
    .btn-style();
    box-shadow: none;
}

:global(.tab-select .van-dropdown-menu__title) {
    padding-right: 20px;
    font-size: 12px;
    color: #666;
}

:global(.tab-select .van-dropdown-menu__title::after) {
    right: 8px;
}

.tab-select {
    height: 29px;
    // 水平滚动
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    // margin-top: 10px;

    &::-webkit-scrollbar {
        display: none;
        width: 0;
    }

    .drow-content {
        margin-top: 12px;
        margin-left: 10px;
        display: flex;
        flex-wrap: wrap;

        .d-item {
            margin-bottom: 10px;
        }
    }
}
</style>